/**
 * Charts3:折线图
 */
import React  from 'react'
import style from './index.less'
import moment from 'moment'
import {IECharts} from '../../../../components'

const Charts3=({
	name=['指数1','指数2'],
	colors=['rgb(68, 198, 255)','rgb(255, 70, 90)'],
	data=[
		["2017-12-26", 0, 0],
		["2017-12-27", 2316176.000000012, 200617.6000000012],
		["2017-12-28", 231617.6000000012, 22617.6000000012],
		["2017-12-29", 2316176.000000012, 256176.000000012],
		["2018-01-02", 44311.4000000012, 406176.000000012],
		["2018-01-04", 44311400.0000012, 30061760.00000012],
		["2018-01-05", 1065552.000000016, 500617.6000000012]
	],
	height=200
})=>{
	const myProps={
		option : {
			grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '15%',
					top:'5%',
	        containLabel: true
	    },
			xAxis : [
        {
            type : 'category',
            boundaryGap : false,
						splitNumber: 5,
			      splitLine: {
			        show: true,
			        lineStyle: {
			          color: '#e6e6e6',
			        },
			      },
			      axisLine: {
			        lineStyle: {
			          color: '#ccd6eb',
			        },
			      },
			      axisLabel: {
			        textStyle: {
			          color: '#888',
			        },
							formatter: value => {
								let text = ''
								let values = value.split('-');
								return `${values[1]}-${values[2]}\n${values[0]}`;
							},
			      },
            data : data.map(item=>item[0])
        }
	    ],

	    yAxis: {
	      type: 'value',
	      boundaryGap: [0, '50%'],
	      splitNumber: 3,
	      splitLine: {
	        lineStyle: {
	          color: '#e6e6e6',
	        },
	      },
	      axisLine: {
	        lineStyle: {
	          color: '#ccd6eb',
	        },
	      },
	      axisLabel: {
	        margin: 8,
	        textStyle: {
	          color: '#888',
	        },
	        formatter: function (value, index) {
	          if (Math.abs(value) >= 100000) {
	            return (value / 10000).toFixed(0) + '万';
	          } else {
	            return value;
	          }
	        },
	      },
	    },
	    tooltip: {
	      trigger: 'axis',
	    },
	    legend: {
	      data: name,
	      bottom: 5,
	      selectedMode: false,
				textStyle: {
					fontSize: 14,
					}
	    },
	    series : [
	        {
	            name:name[0],
							type: 'line',
				      symbol: 'circle',
				      showSymbol: true,
				      itemStyle: {
				        normal: {
				          color: colors[0],
				        },
				      },

				      smooth: true,
	            data:data.map(item=>item[1])
	        },
					{
	            name:name[1],
							type: 'line',
				      symbol: 'circle',
				      showSymbol: true,
				      itemStyle: {
				        normal: {
				          color: colors[1],
				        },
				      },

				      smooth: true,
	            data:data.map(item=>item[2])
	        }
	    ]

		}
	}
  return(
    <div  className={`chart ${style.chart}`} style={{height}}>
      <IECharts {...myProps} resizable={true}/>
    </div>
  )
}

Charts3.propTypes={
	// data
}

export default Charts3
